<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表格详情</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-body-sm">
                            <table id="bootstrap-table" data-page-size="10" data-show-custom-view="true"
                                data-custom-view="customViewFormatter" data-show-custom-view-button="false">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="profileTemplate">
        <div class="col-sm-4">
            <div class="contact-box">
                <a href="">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class=" m-t-xs img-responsive" src="%IMAGE%">
                            <div class="m-t-xs font-bold">%name%</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <b><strong>编号：%code%</strong></b>
                        <p><i class="fa fa-jpy"></i> 余额：%account%</p>
                        <address>
                            电子邮箱: %mail%<br>
                            <abbr title="Phone">手机号码：</abbr> %phone%
                        </address>
                    </div>
                    <div class="clearfix"></div>
                </a>
            </div>
        </div>
    </template>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js"></script>

    <script type="text/javascript">
        $(function () {
            var options = {
                url: "./../../../static/data/list.json",
                method: 'get',
                showSearch: false,
                showRefresh: true,
                showToggle: true,
                showColumns: true,
                clickToSelect: true,
                sidePagination: 'client',
                columns: [{
                    checkbox: true
                },
                {
                    title: '序号',
                    width: 5,
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field: 'code',
                    title: '用户编号'
                },
                {
                    field: 'name',
                    title: '用户姓名'
                },
                {
                    field: 'phone',
                    title: '用户手机'
                },
                {
                    field: 'mail',
                    title: '用户邮箱'
                },
                {
                    field: 'account',
                    title: '账户金额'
                },
                {
                    field: 'status',
                    title: '用户状态',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<label class="badge badge-primary">正常</label>';
                        } else {
                            return '<label class="badge badge-danger">停用</label>';
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-primary btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
        function customViewFormatter(data) {
            var template = $('#profileTemplate').html()
            var view = ''
            $.each(data, function (i, row) {
                view += template.replace('%code%', row.code)
                    .replace('%IMAGE%', "/static/img/banner/2.jpg")
                    .replace('%name%', row.name)
                    .replace('%mail%', row.mail)
                    .replace('%phone%', row.phone)
                    .replace('%account%', row.account);
            })

            return `<div class="row mx-0">${view}</div>`
        }
    </script>
</body>

</html>